<!--
 * @Description: App
 * @Author: rendc
 * @Date: 2023-02-24 09:18:02
 * @LastEditors: 锡诚 3343785462@qq.com
 * @LastEditTime: 2023-03-07 08:43:31
-->
<script setup>

import Sort from "@/views/SortView.vue";
import Cart from "@/views/ShoppingCartView.vue";
import Login from "@/views/LoginView.vue";
import { ref } from 'vue';
import{ useRouter } from "vue-router";

const time = ref(30 * 60 * 60 * 1000);
const router = useRouter();

let data = [
  {
    text: "手机",
    icon:"https://dsfs.oppo.com/archives/202205/202205181205436283cb1f48291.png?_w_=96&_h_=96&x-oss-process=image/format,webp",
  },
  {
    text: "平板",
    icon:"https://dsfs.oppo.com/archives/202205/202205181205316283cb4f17879.png?_w_=96&_h_=96&x-oss-process=image/format,webp",
  },
  {
    text: "穿戴",
    icon: "	https://dsfs.oppo.com/archives/202302/2023022411021663f82cb495007.png?_w_=144&_h_=144&x-oss-process=image/format,webp",
  },
  {
    text: "声学",
    icon: "https://dsfs.oppo.com/archives/202301/2023013011011663d7368052571.png?_w_=144&_h_=144&x-oss-process=image/format,webp",

  },
  {
    text: "配件",
    icon: "https://dsfs.oppo.com/archives/202212/20221215111242639a982a56da9.png?_w_=96&_h_=96&x-oss-process=image/format,webp",
  },
];
let data1 = [
    {
        icon:"https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221215/b6052c277cc9d8f7f553ffcd56036245-1711869841.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Find N2 到手价¥8989"
    },
    {
        icon:"https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230202/46ca2df8e6ea7815165c5e9eb9ef2f84-1958657745.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Find N2 Flip"
    },
    {
        icon :"https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221123/d57ce8657c7384a934e81895d7fb2e74947750939.png?x-oss-process=image/format,webp",
        text:"OPPO Reno9"
    },
    {
        icon:"https://dsfs.oppo.com/omp/1668563947243-_-02aec4bb119a4873b6e988e8301103a7.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Reno9 Pro+"
    },
    {
        icon:"https://dsfs.oppo.com/omp/1646102926133-_-f4fc4fd7a88941f38f4fad1ad093f3ee.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"Find X5 Pro 天玑版"
    },
    {
        icon:"https://dsfs.oppo.com/omp/1668472650480-_-91929640646745ac9838b4f8587b2f7b.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO A1 Pro"
    },
    {
        icon:"https://dsfs.oppo.com/omp/1650614799969-_-b5dfbb92eae646b2b8eb7799b5ce45c8.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO K10"
    },
    {
        icon:"https://dsfs.oppo.com/omp/1658730050818-_-28d74b0cb45f497cb879838f79f664f0.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"一加 Ace Pro"
    },
    {
        icon:"https://dsfs.oppo.com/omp/1645358158586-_-b46383a57e7e43a6b008f67c0942420a.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"一加 10 Pro"
    },

]
let data2 = [
    {
        icon:"https://dsfs.oppo.com/omp/1650543046211-_-f88b27fef82c4e91b12bd4346297362b.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:""
    },
    {
        icon:"https://dsfs.oppo.com/omp/1645358158586-_-b46383a57e7e43a6b008f67c0942420a.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:""
    },
    {
        icon:"https://dsfs.oppo.com/omp/1649576816046-_-c4f8cdf26c414245a97ce52db654e29b.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:""
    },
    {
        icon:"https://dsfs.oppo.com/omp/1649931218820-_-63e505e389f042b6b63d7db3f65ad648.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:""
    },
    {
        icon:"https://dsfs.oppo.com/omp/1658730050818-_-28d74b0cb45f497cb879838f79f664f0.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:""
    },
    {
        icon:"https://dsfs.oppo.com/omp/1649994424283-_-8d32e3f57c4d428e9cfbb84016206384.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:""
    },
    {
        icon:"https://dsfs.oppo.com/omp/1664439930972-_-f7e95685176544a6bc3ab862d29f6a67.png?_w_=600&_h_=600&x-oss-process=image/format,webp",
        text:""
    },
    {
        icon:"https://dsfs.oppo.com/archives/202107/2021071605074160f15185ce9c7.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:""
    },

]
let data3 = [
    {
        icon:"https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230129/5ace9b5ef00dd3b2f8723576bec74d891463934777.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"一加 Buds Ace降噪游戏耳机"
    },
    {
        icon:"https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221223/4374263976e2a8994045f278ab419704-1448223720.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"一加 Buds pro旗舰耳机乔木绿"
    },
    {
        icon :"https://dsfs.oppo.com/omp/1666271491028-_-2c306e089ca944bc9c8a8cb5c89842ce.png?_w_=1440&_h_=1440&x-oss-process=image/format,webp",
        text:"OPPO Enco Air2Pro"
    },
    {
        icon:"https://dsfs.oppo.com/omp/1667549264601-_-730301fd1f2b43068a5f112b8b374662.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Enco X2镜夜黑"
    },
    {
        icon:"https://dsfs.oppo.com/archives/202104/20210428090452608961e8a3f62.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Enco Air灵动版"
    },
    {
        icon:"https://dsfs.oppo.com/omp/1660014980814-_-0e8fbdb287464e3cb046e8f1e894a6a6.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Enco Air2i真无线耳机"
    },
]
let data4 = [
    {
        icon:"https://dsfs.oppo.com/omp/1666060870243-_-7bc925edc8844262803acebcf48f54b3.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Watch SE水墨灰"
    },
    {
        icon:"https://dsfs.oppo.com/omp/1660129796666-_-3ad0588060dd42a09f45dd7b11c8277d.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Watch 3系列 新品手表"
    },
    {
        icon :"https://dsfs.oppo.com/omp/1660532261710-_-830f09a8a64d440faa1317247a1ab8b9.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO 手环2 系列新品手环"
    },
]
let data5 = [
    {
        icon:"https://dsfs.oppo.com/omp/1658805204562-_-2b70fe81cc0f4e0286c52f4caba608ce.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Pad8GB+128GB"
    },
    {
        icon:"https://dsfs.oppo.com/omp/1657101147279-_-c269e1823ef94f23bbdfc193403771bc.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Pad Air4GB+64GB"
    },
    {
        icon :"https://dsfs.oppo.com/omp/1654758663422-_-2d797fd127844dcd9a4f2feeae77149d.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Pad Air4GB+128GB"
    },
    {
        icon:"https://dsfs.oppo.com/archives/202202/2022022403021462173316cc2cf.png?_w_=321&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO Pencil自研手写笔"
    },
    {
        icon:"https://dsfs.oppo.com/omp/1653237556797-_-671afcb4945c47abb2a2b0e8cfffce7a.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO 智美生活智能手写笔"
    },
    {
        icon :"https://dsfs.oppo.com/omp/1661399246891-_-11a933014bfd4247959d458f8ac0d520.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
        text:"OPPO 智美生活智能磁吸键盘"
    },
]
let data6 = [
  {
      icon:"https://dsfs.oppo.com/omp/1649832915699-_-794621b5c94844e18adb3d8286b2eb3a.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
      text:"OPPO 智能电视 k9x 65英寸"
  },
  {
      icon:"https://dsfs.oppo.com/omp/1667810694501-_-14cc2539a9ee4f72b7240946a3c0e254.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
      text:"OPPO 智能电视 k9x 43英寸"
  },
  {
      icon:"https://dsfs.oppo.com/archives/202109/2021091702095661443b486ae6b.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
      text:"OPPO 智能电视 k9 75英寸"
  },
  {
      icon:"https://dsfs.oppo.com/omp/1661408472283-_-2c1e376cfceb4701bb26e903b880209e.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
      text:"OPPO 智能电视 k9 65英寸"
  },
  {
      icon:"https://dsfs.oppo.com/archives/202105/2021051709053560a27613b5b03.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
      text:"OPPO 智能电视 k9 55英寸"
  },
  {
      icon:"https://dsfs.oppo.com/archives/202109/2021092705092061518c205f53d.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
      text:"OPPO 智能电视 s1 65英寸"
  },
]
let data7 = [
  {
    icon:"https://dsfs.oppo.com/archives/202104/20210420100400607e3a1478bcb.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"OPPO GaN 氮化镓电源适配器"
  },
  {
    icon:"https://dsfs.oppo.com/archives/201912/201912030512435de628732d1c1.png?x-oss-process=image/format,webp",
    text:"OPPO 30W VOOC 闪充套装"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202108/202108240808396124eae328615.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"OPPO 10W电源适配器"
  },
  {
    icon:"https://dsfs.oppo.com/omp/1655712411920-_-8e0727350e3b4bc7b95c4644c70d66ad.png?_w_=1120&_h_=1120&x-oss-process=image/format,webp",
    text:"OPPO USB Type-C 普通版"
  },
  {
    icon:"https://dsfs.oppo.com/archives/201904/201904190404255cb9875d4e6d4.png?x-oss-process=image/format,webp",
    text:"O-Fresh立体声耳机 深邃黑"
  },
  {
    icon:"https://dsfs.oppo.com/omp/1655712841651-_-7919abdffcd74d87951bf1f8ef879992.png?_w_=500&_h_=500&x-oss-process=image/format,webp",
    text:"OPPO 原装 USB 数据线"
  },
]
let data8 = [
  {
    icon:"https://dsfs.oppo.com/omp/1653475457675-_-26a6db15bb2d479a908aca9bcf3757e6.png?_w_=600&_h_=600&x-oss-process=image/format,webp",
    text:"ROCK 多功能收纳支架套装"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202106/2021061311060660c6287ad366b.png?_w_=200&_h_=200&x-oss-process=image/format,webp",
    text:"闪极超级移动电源"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202112/2021122111120261c148d24ceaa.png?_w_=600&_h_=600&x-oss-process=image/format,webp",
    text:"Calk 金属斜入耳机式耳机"
  },

]
let data9 = [
  {
    icon:"https://dsfs.oppo.com/omp/1648025847407-_-a44ebb1775d6420e98bf9866533908f5.png?_w_=600&_h_=600&x-oss-process=image/format,webp",
    text:"蹦跶 智能跳绳 ISR1 紫色"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202106/2021060901063760bfab957aa7a.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"和多正维度头部按摩仪 白色"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202103/202103190603126054840030576.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"每物筋膜枪 extra mini"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202107/2021070606074660e42fe69a1ec.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"金稻 可视毛孔清洁器 蓝色"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202107/2021072007072260f6adf2b2a31.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"bebird 智能可视采耳棒"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202109/20210914030920614048c00ee5f.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"素诺 智能可视超声波洁牙仪"
  },
]
let data10 = [
  {
    icon:"https://dsfs.oppo.com/omp/1653999495013-_-ea9d141282854ed489b6fe6bc87d4465.png?_w_=600&_h_=600&x-oss-process=image/format,webp",
    text:"国潮系列抽取式面巾纸 单包装"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202111/20211125061155619f63ff46df4.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"大优精梳超柔锻档方巾"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202103/202103190803316054970f9e6e7.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"永骏冠龙升级版三代三阶魔方"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202106/2021060210064160b6ef31120ee.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"极蜂随生手电筒 F1深空蓝"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202106/2021063003065860dc1ede8d271.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"柚家除湿袋（1袋） 白色"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202109/20210926080906615069eac8a5a.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"天竺棉慢回弹午休枕"
  },
]
let data11 = [
  {
    icon:"https://dsfs.oppo.com/omp/1652789828466-_-42310dfe74894ca48d9c69db9a4b641e.png?_w_=1080&_h_=1080&x-oss-process=image/format,webp",
    text:"【商城定制】JLM迷你手持风扇"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202201/2022011805010261e687aaa875c.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"EraClean世净 智能杀菌牙刷架"
  },
  {
    icon:"https://dsfs.oppo.com/omp/1655811029489-_-dcfdf6e87bbc427ea0101e8b460b663d.png?_w_=600&_h_=600&x-oss-process=image/format,webp",
    text:"AIREN 除湿净化一体机"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202112/2021120812123661af8e0c475c4.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"质感时光 酷暖摇摇热暖手杯"
  },
  {
    icon:"https://dsfs.oppo.com/omp/1648797498691-_-3ac7623d228743968703d12411171e93.png?_w_=1080&_h_=1080&x-oss-process=image/format,webp",
    text:"AiLving 便携式电动洗鼻器"
  },
  {
    icon:"https://dsfs.oppo.com/archives/202111/20211123051109619cbb6de9a03.png?_w_=320&_h_=320&x-oss-process=image/format,webp",
    text:"生活元素 净水养生壶 白色"
  },
]
const searchData =[
        { id: 1, text: "一加 Ace 2V" },
        { id: 2, text: "Find N2 系列" },
        { id: 3, text: "Reno9 系列" },
        { id: 4, text: "新品蓝牙耳机" },
        { id: 5, text: "全智能手表" },
];
//跳转到登录页
const toLogin = () => {
console.log("🚀 ~ file:toLogin ~ toLogin:")
router.push("/login");
};
// 退出按钮
const toLogout = () => {
  router.push("/login");
  sessionStorage.removeItem("user");
};

// 获取登录的用户
const username = sessionStorage.getItem("user");
const active = ref(0);
const swipeClick = (e) =>{
 console.log("🚀 ~ file: swipeClick - e:",e);
};
</script>

<template>
    <!--搜索栏-->
  <div v-if="active ==0">
  <div class="search" style="margin-right: 8px;">
    <van-search v-model="value" 
    show-action
    @search="onSearch">
        <template #action>
    <div @click="toLogin()">登录</div>
  </template>
    </van-search></div>
    <van-swipe class="mySwipe1" style="height: 20px;"  vertical :show-indicators="false" :autoplay="3000" >
        <van-swipe-item  
            v-for="i in searchData"
            :key="i.id"
        >{{ i.text }}</van-swipe-item>
    </van-swipe>
  <!--轮播-->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item @click="swipeClick">
  <van-image
  width="100%"
  height="162.5"
  src="https://dsfs.oppo.com/archives/202303/2023030109032663ff542686650.jpg?_w_=1080&_h_=600&x-oss-process=image/format,webp"
  />
</van-swipe-item>
<van-swipe-item @click="swipeClick">
  <van-image
  width="100%"
  height="162.5"
  src="https://dsfs.oppo.com/archives/202302/2023022705022763fc72cf85cab.jpg?_w_=1080&_h_=600&x-oss-process=image/format,webp"
  />
</van-swipe-item>
<van-swipe-item @click="swipeClick">
  <van-image
  width="100%"
  height="162.5"
  src="https://dsfs.oppo.com/archives/202212/2022122911122263adb0ae23c6b.jpg?_w_=1080&_h_=600&x-oss-process=image/format,webp"
  />
</van-swipe-item>
<van-swipe-item @click="swipeClick">
  <van-image
  width="100%"
  height="162.5"
  src="https://dsfs.oppo.com/archives/202212/20221201081254638898a23f67b.jpg?_w_=1080&_h_=600&x-oss-process=image/format,webp"
  />
</van-swipe-item>
<van-swipe-item @click="swipeClick">
  <van-image
  width="100%"
  height="162.5"
  src="https://dsfs.oppo.com/archives/202302/2023022707020663fc8f8e335d8.jpg?_w_=1080&_h_=600&x-oss-process=image/format,webp"
  />
</van-swipe-item>
<van-swipe-item @click="swipeClick">
  <van-image
  width="100%"
  height="162.5"
  src="https://dsfs.oppo.com/archives/202301/2023012910013263d5d7b48bab2.jpg?_w_=1080&_h_=600&x-oss-process=image/format,webp"
  />
  </van-swipe-item>
</van-swipe>

<!--宫格-->
  <van-grid
  icon-size="45"
  column-num="5"
  :border="false"
  >
<van-grid-item
  v-for="i in data"
  :key="i"
  icon-size="45"
  :icon="i.icon"
  :text="i.text"
  to="SortNavBar"
  />
  </van-grid>

<!-- 内容区{{ active }} -->
  <!--手机专区-->
  <div class="main">
  <div class="van-ellipsis">手机专区</div>

    <!-- 自定义图片 -->
    <div class="myImage">
    <!-- 图片 -->
    <van-image
    radius="10px"
    fit="cover"
    width="351"
    height="104.46"
    src="https://dsfs.oppo.com/archives/202211/2022112502112563806719e68c5.jpg?_w_=1008&_h_=300&x-oss-process=image/format,webp"
    />
</div>
<!-- 自定义宫格 -->
<div class="myGrid">
    <!-- 宫格 -->
    <van-grid
            icon-size="100"
            :column-num="3"
            :border="true"
          >
        <van-grid-item 
            v-for="i in data1"
            :key="i"
            icon-size="100"
            :icon="i.icon"
            :text="i.text"
            to="/goodsview"
        />
        </van-grid>
    </div>
<!--今日必抢-->
<div class="limitbuy">
    <div class="van-ellipsis">今日必抢</div>
    <van-count-down :time="time" />
    <div class="goodsDragList">
      <div style="width: 200%;padding: 12px;">
    <van-grid
            icon-size="50"
            :column-num="8"
            :border="false"
            >
        <van-grid-item
            v-for="i in data2"
            :key="i"
            icon-size="50"
            :icon="i.icon"
            :text="i.text"
        />
</van-grid>
</div>
</div>
</div>
<!--蓝牙耳机-->
<div class="van-ellipsis">蓝牙耳机</div>
 <!-- 自定义图片 -->
 <div class="myImage">
    <!-- 蓝牙耳机 -->
    <van-image
    radius="10px"
    fit="cover"
    width="351"
    height="104.46"
    src="https://dsfs.oppo.com/archives/202302/2023022310023763f6d171e7627.jpg?_w_=1008&_h_=300&x-oss-process=image/format,webp"
    />
</div>
<!-- 自定义宫格 -->
<div class="myGrid">
    <!-- 宫格 -->
    <van-grid
            icon-size="100"
            :column-num="3"
            :border="true"
          >
        <van-grid-item
            v-for="i in data3"
            :key="i"
            icon-size="100"
            :icon="i.icon"
            :text="i.text"
        />
        </van-grid>
    </div>
<!--智能穿戴-->
<div class="van-ellipsis">智能穿戴</div>
  <!-- 自定义图片 -->
  <div class="myImage">
    <!-- 智能穿戴图片 -->
    <van-image
    radius="10px"
    fit="cover"
    width="351"
    height="104.46"
    src="https://dsfs.oppo.com/archives/202212/202212120212126396ca38e133a.png?_w_=1008&_h_=300&x-oss-process=image/format,webp"
    />
</div>
<!-- 自定义宫格 -->
<div class="myGrid">
    <!-- 宫格 -->
    <van-grid
            icon-size="100"
            :column-num="3"
            :border="true"
          >
        <van-grid-item
            v-for="i in data4"
            :key="i"
            icon-size="100"
            :icon="i.icon"
            :text="i.text"
        />
        </van-grid>
    </div>
    <!--平板电脑-->
<div class="van-ellipsis">平板电脑</div>
 <!-- 自定义图片 -->
 <div class="myImage">
    <!-- 平板电脑 -->
    <van-image
    radius="10px"
    fit="cover"
    width="351"
    height="104.46"
    src="https://dsfs.oppo.com/archives/202211/202211151011596372f56f0d8ea.png?_w_=1008&_h_=300&x-oss-process=image/format,webp"
    />
</div>
<!-- 自定义宫格 -->
<div class="myGrid">
    <!-- 宫格 -->
    <van-grid
            icon-size="100"
            :column-num="3"
            :border="true"
          >
        <van-grid-item
            v-for="i in data5"
            :key="i"
            icon-size="100"
            :icon="i.icon"
            :text="i.text"
        />
        </van-grid>
    </div>
  <!--智能电视-->
  <div class="van-ellipsis">智能电视</div>
  <!-- 自定义图片 -->
  <div class="myImage">
    <!-- 智能电视 -->
    <van-image
    radius="10px"
    fit="cover"
    width="351"
    height="104.46"
    src="https://dsfs.oppo.com/archives/202206/20220606050615629dca53cba19.jpg?_w_=1008&_h_=300&x-oss-process=image/format,webp"
    />
</div>
<!-- 自定义宫格 -->
<div class="myGrid">
    <!-- 宫格 -->
    <van-grid
            icon-size="100"
            :column-num="3"
            :border="true"
          >
        <van-grid-item
            v-for="i in data6"
            :key="i"
            icon-size="100"
            :icon="i.icon"
            :text="i.text"
        />
        </van-grid>
    </div>
    <!--原装配件-->
  <div class="van-ellipsis">原装配件</div>
  <!-- 自定义图片 -->
  <div class="myImage">
    <!-- 原装配件 -->
    <van-image
    radius="10px"
    fit="cover"
    width="351"
    height="104.46"
    src="https://dsfs.oppo.com/archives/202206/20220606050615629dca53cba19.jpg?_w_=1008&_h_=300&x-oss-process=image/format,webp"
    />
</div>
<!-- 自定义宫格 -->
<div class="myGrid">
    <!-- 宫格 -->
    <van-grid
            icon-size="100"
            :column-num="3"
            :border="true"
          >
        <van-grid-item
            v-for="i in data7"
            :key="i"
            icon-size="100"
            :icon="i.icon"
            :text="i.text"
        />
        </van-grid>
    </div>
<!--数码周边-->
<div class="van-ellipsis">数码周边</div>
<!-- 自定义宫格 -->
<div class="myGrid">
    <!-- 宫格 -->
    <van-grid
            icon-size="100"
            :column-num="3"
            :border="true"
          >
        <van-grid-item
            v-for="i in data8"
            :key="i"
            icon-size="100"
            :icon="i.icon"
            :text="i.text"
        />
        </van-grid>
    </div>
    <!--运动健康-->
  <div class="van-ellipsis">运动健康</div>
<!-- 自定义宫格 -->
<div class="myGrid">
    <!-- 宫格 -->
    <van-grid
            icon-size="100"
            :column-num="3"
            :border="true"
          >
        <van-grid-item
            v-for="i in data9"
            :key="i"
            icon-size="100"
            :icon="i.icon"
            :text="i.text"
        />
        </van-grid>
    </div>
    <!--生活日用-->
  <div class="van-ellipsis">生活日用</div>
<!-- 自定义宫格 -->
<div class="myGrid">
    <!-- 宫格 -->
    <van-grid
            icon-size="100"
            :column-num="3"
            :border="true"
          >
        <van-grid-item
            v-for="i in data10"
            :key="i"
            icon-size="100"
            :icon="i.icon"
            :text="i.text"
        />
        </van-grid>
    </div>
    <!--家用电器-->
  <div class="van-ellipsis">家用电器</div>
<!-- 自定义宫格 -->
<div class="myGrid">
    <!-- 宫格 -->
    <van-grid
            icon-size="100"
            :column-num="3"
            :border="true"
          >
        <van-grid-item
            v-for="i in data11"
            :key="i"
            icon-size="100"
            :icon="i.icon"
            :text="i.text"
        />
        </van-grid>
    </div>
</div>
  <!--内容结束-->
  <div class="article-end">
    <van-grid direction="horizontal" clickable
    :column-num="2"
    :border="false"
    icon-size="20">
    <van-grid-item icon="src/assets/icon99.png" text="下载APP" />
    <van-grid-item icon="src/assets/icon98.png" text="登录账号" to="Login"/>
  </van-grid>
  <div class="end-text">
    <div class="van-ellipsis">营业执照</div>
  </div>
  <div class="end-text1">
    <div class="van-ellipsis">隐私政策</div>
  </div>
  <div class="end-text2">
    <div class="van-ellipsis">用户协议</div>
  </div>
  </div>

</div>
  <div>
  <Sort v-if="active == 1" />
  <Cart v-if="active == 2" />
  <Login v-if="active == 3" />
  </div>
  <!--标签栏-->
    <van-tabbar v-model="active" 
     active-color="red"
     >
    <van-tabbar-item>
      <span>首页</span>
    <template #icon="props">
     <div 
      class="iconImg"
      :class="props.active ? 'homeActive':'homeInactive'">
     </div>
    </template>
  </van-tabbar-item>

    <van-tabbar-item icon="search">
      <span>分类</span>
    <template #icon="props">
     <div 
      class="iconImg"
      :class="props.active ? 'sortActive':'sortInactive'">
     </div>
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="shopping">   
      <span>购物车</span>
    <template #icon="props">
     <div 
      class="iconImg"
      :class="props.active ? 'shoppingActive':'shoppingInactive'">
     </div>
    </template>
  </van-tabbar-item>
    <van-tabbar-item icon="nabs">
      <span>我的</span>
    <template #icon="props">
     <div 
      class="iconImg"
      :class="props.active ? 'nabsActive':'nabsInactive'">
     </div>
    </template></van-tabbar-item>

</van-tabbar>

<van-back-top class="custom"
    right="2vw" 
    bottom="28vh"><van-icon name="back-top" color="black" />
  </van-back-top>

</template>

<style lang="less" scoped>
.mySwipe1{
    position:fixed;
    top: 10px;
    left: 50px;
    color: #d1cece;
}
.van-search{
    padding-top: 6px;
    padding-bottom: 6px;
}
:deep(.van-search-3-input){
    background-color: #00000000;
}
:deep(.van-field__body){
    background-color: #00000000;

}
:deep(.van-cell__value){
    background-color: #00000000;
}
:deep(.van-cell){
    background-color: #2b26260b;
}
:deep(.van-search__content){
    background-color: #00000000;
}
:deep(.van-search){
    background-color: #00000000;
}
.search{
    background-color: #00000000;
}
.van-ellipsis{
    width: 65px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.main{
    background-color:#f7f4f4d8;
    padding-bottom: 20px;
    .myImage{
        padding-left: 12px;
    }
    .myGrid{
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 5px;
        
    }
    .van-grid-item__content{
      width:115.828px;
      height: 190.688px;
    }
    .van-grid-item__text{
        width: 80px;
        font-size: 10px;
        text-size-adjust: 10px;
    }
    .van-count-down{
        padding-left: 95px;
        margin-top:-30px;
        width: 20px;
    }
    .goodsDragList{
        overflow-x:scroll ;
    }
    .goodsDragList::-webkit-scrollbar{
      display: none;
    }
    


}
.article-end{
    padding-bottom: 111.5px;
    .van-grid-item__content--horizontal{
      padding-top: 12px;
    }
    .van-ellipsis{
      font-size:xx-small;
      padding-left: 80px;
    }
    .end-text1{
      padding-left: 80px;
      margin-top: -39px;
    }
    .end-text2{
      padding-left: 155px;
      margin-top: -39px;
    }
    }
.iconImg{
  width: 24px;
  height: 24px;
  margin: 0;
  background-size: 24px!important;
}
.homeActive{
  background: url("src/assets/icon1.png")0px -24px;
}
.homeInactive {
  background: url("src/assets/icon2.png");
}
.sortActive {
  background: url("src/assets/icon3.png") 0px -72px;
}
.sortInactive {
  background: url("src/assets/icon4.png") 0-48px;
}
.shoppingActive {
  background: url("src/assets/icon5.png") 0px -120px;
}
.shoppingInactive {
  background: url("src/assets/icon6.png") 0px -96px;
}
.nabsActive {
  background: url("src/assets/icon7.png") 0px -168px;
}
.nabsInactive {
  background: url("src/assets/icon8.png") 0px -144px;
}


</style>
<style>
:root{
  --van-grid-item-text-color:black;
  --van-field-icon-size: 20px;
  --van-tabbar-height:55px;
  --van-count-down-text-color:red;
  --van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
  --van-grid-item-text-font-size:13px;
  --van-back-top-background:white;
}
</style>
